import React, {useEffect, useState} from 'react';

import {paginationQueryUsingGET} from "@/services/lapi-backend/interfaceinfoAdmin";
import {Radio, Button, Card, Col, Divider, Drawer, Empty, Pagination, Row, Spin, Space, message} from "antd";

import Search from "antd/es/input/Search";
import {assignUsingGET} from "@/services/lapi-backend/UserInterfaceInfo";

const Display: React.FC = () => {

  const [loading, setLoading] = useState<boolean>(false)
  const [total, setTotal] = useState<number>(0)
  const [pageNow, setPageNow] = useState<number>(1);
  const [interfaceInfoData, setInterfaceInfoData] = useState<API.InterfaceInfo[]>([])
  const [pageParam, setPageParam] = useState<API.paginationQueryUsingGETParams>({})
  const [open, setOpen] = useState<boolean>(false);
  const [interfaceInfo, setInterfaceInfo] = useState<API.InterfaceInfo>({})
  const pageQuery = (page: number, pageSize: number) => {
    setLoading(true)
    pageParam.pageSize = pageSize;
    pageParam.pageNow = page;
    paginationQueryUsingGET(pageParam, {}).then(res => {
      if (res.code == 0) {
        setPageNow(page)
        const pageInterfaceVo = res.data;
        if (res.data != null)
          setTotal(res.data.total as number)
        setInterfaceInfoData(pageInterfaceVo?.data as API.InterfaceInfo[])
        setLoading(false)
      }

    })
  }
  const initAssignCount = (id: number) => {
    assignUsingGET({id: id}, {}).then(r => {
      if (r.code == 0) {
        message.success(r.message)
        setOpen(false)
        setInterfaceInfo({})
      } else {
        message.error(r.message)
      }
    })
  }
  useEffect(() => {
    pageQuery(1, 6);
  }, [])
  return (
    <>
      <Spin spinning={loading}>
        <Row justify="space-between" align="bottom">
          <Col span={8} offset={8}> <Search placeholder="输入接口名搜索" enterButton onSearch={e => {
            pageParam.name = e;
            pageQuery(1, 6)
          }}/></Col>
        </Row>
        <Divider> </Divider>
        {interfaceInfoData.length == 0 ? <Empty/> :
          <>
            <Row gutter={24}>
              {interfaceInfoData.map((r) => {
                return <Col span={8}>
                  <Card title={
                    <Row wrap={false} justify={"space-between"}>
                      <Col span={8}>
                        {r.name}
                      </Col>
                      <Col span={8} offset={11}>
                        <Button onClick={() => {
                          setOpen(true)
                          setInterfaceInfo({...r})
                        }
                        }>点击获取</Button>
                      </Col>
                    </Row>
                  }
                        style={{marginBottom: 16, height: 300, overflow: "hidden",}}
                        hoverable={true}
                        bordered={false}
                  >
                    {r.description}
                  </Card>

                </Col>
              })}
            </Row>
            <div
              style={{textAlign: "center", height: 100}}>
              <Pagination showQuickJumper showSizeChanger={false} total={total}
                          defaultPageSize={6}
                          showTotal={(total, range) => {
                            return "总记录条数:" + total + "条"
                          }}
                          defaultCurrent={1}
                          current={pageNow}
                          onChange={(page, pageSize) => {
                            pageQuery(page, pageSize)
                          }}
              />
            </div>
          </>
        }
      </Spin>
      <Drawer title={interfaceInfo.name}
              placement="right"
              onClose={() => {
                setOpen(false)
              }}
              open={open}
              size={"large"}
              extra={
                <Space>
                  <Button onClick={() => {
                    setOpen(false)
                  }}>取消</Button>
                  <Button type="primary" onClick={() => {
                    initAssignCount(interfaceInfo.id == undefined ? 0 : interfaceInfo.id);
                  }}>
                    立即获取
                  </Button>
                </Space>
              }
      >

        <p>{interfaceInfo.description}</p>
        <p>套餐选择: &nbsp;
          <Radio.Group options={[{label: '免费', value: 'free'}]} value={"free"} optionType="button"></Radio.Group>
        </p>
        <p>套餐次数: &nbsp;<Radio.Group options={[{label: '无限', value: 'free'}]} value={"free"}
                                        optionType="button"></Radio.Group></p>

      </Drawer>
    </>


  )
};

export default Display;
